<template>
    <div class="fixed bottom-0 left-0 right-0 h-16 bg-white flex items-center justify-around">
        <button v-for="(tab, index) in tabs" :key="index" class="flex flex-col items-center" @click="handleTabClick(tab.path)">
            <el-icon :class="[activeTab === tab.name ? 'text-[#2970FF]' : 'text-gray-400', 'text-xl']">
                <component :is="tab.icon" />
            </el-icon>
            <span :class="[activeTab === tab.name ? 'text-[#2970FF]' : 'text-gray-400', 'text-xs mt-1']">
                {{ tab.name }}
            </span>
        </button>
    </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { House, Plus, User, DataAnalysis, Trophy } from '@element-plus/icons-vue'


const props = defineProps({
    activeTab: {
        type: String,
        default: '首页'
    }
})

const emit = defineEmits(['tabChange'])

const router = useRouter()
const route = useRoute()

const currentPath = computed(() => route.path)

const tabs = [
    { name: '首页', icon: House, path: '/mobile/home' },
    { name: '分析', icon: DataAnalysis, path: '/mobile/analysis' },
    { name: '出题', icon: Plus, path: '/mobile/create' },
    { name: '训练', icon: Trophy, path: '/mobile/training' },
    { name: '我的', icon: User, path: '/mobile/profile' }
]

const handleTabClick = (path) => {
    const tab = tabs.find(t => t.path === path)
    emit('tabChange', tab.name)
    router.push(path)  // 添加路由跳转
}
</script>